<template>
    <div>
        <!--导航条-->
        <div id="Tabbar">
            <span id="span">
                <span class="fa fa-angle-left"></span>
                <span @click="backClick">返回</span>
            </span>
            <span>账户登录</span>
        </div>

        <!--登录图片-->
        <img src="static/v7_logo.png" alt="">
        <br>
        <!--登录区分-->
        <div id="login">
            <span @click="isshow = true">
                密码登录
            </span>
            <span @click="isshow = false">
                短信登录
            </span>
            <div class="h1" v-if="isshow"></div>
            <div class="h2" v-else></div>
        </div>
        
        <PswLogin v-if="isshow" ></PswLogin>
        <SmsLogin v-else></SmsLogin>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Tabbar from './Tabbar.vue';
import PswLogin from './Myself-PswLogin.vue';
import SmsLogin from './Myself-SmsLogin.vue';
export default{
    data:function(){
        return {
            isshow:true
        }
    },
    methods:{
        backClick:function(){
            location.hash="/"
        }
    },
    components:{
        Tabbar,
        PswLogin,
        SmsLogin,
    }
}
</script>

<style scoped>
    img{
        width: 70vw;
        margin-top: 10vh;
        margin-left: 15vw;
    }
    #Tabbar{
        height: 8vh;
        width: 100vw;
        background-color: black;
        color: white;
        font-size: 4.5vw;  
    }
    #Tabbar #span{
        line-height: 8vh;
        margin-left: 5vw;
        margin-right: 25vw;
    }
    #login{
        margin-top: 2vh;
        text-align: center;
        color: #5b5b5b;
    }
    #login span{
        margin-left: 13vw;
        margin-right: 13vw;
        font-size: 4vw;
    }
    .h1{
        width: 20vw;
        height: 0.3vh;
        background-color: red;
        margin-top: 2vh;
        margin-left: 18vw;
    }
    .h2{
        width: 20vw;
        height: 0.3vh;
        background-color: red;
        margin-left: 62vw;
        margin-top: 2vh;

    }
</style>